/**
 * Created by Carl on 2019/1/30
 * v-loading 指令
 *
 */
// import Vue from "vue"
import "./loading.css"
let isEmpty = function (binding,value) {
  if(binding.value && binding.value.option){
    return binding.value.option[value] != 'undefine'?false:true
  }else {
    return true
  }

}

// Vue.component('child', {
//   render: function(createElement) {
//     console.log('render',this)
//     if (this.items.length) {
//       return createElement('ul', this.items.map(function(item){
//         return createElement('li', item.name);
//       }))
//     } else {
//       return createElement('p', 'No items found.');
//     }
//   },
//
//   props: {
//     items: {
//       type: Array,
//       default: function() {
//         return [
//           {
//             name: 'render1'
//           },
//           {
//             name: 'render2'
//           }
//         ]
//       }
//     }
//   }
// });

export default {
    bind(el, binding, vnode){
      console.log('我再bind',vnode)
      el.style.position = 'relative'
      binding.value = Object.assign({loading:false},binding.value)
      let isMark = !isEmpty(binding,'mark') ? binding.value.option.mark : true
      let dom = document.createElement("div");
      dom.classList.add('loading_div')
      isMark && dom.classList.add('loading_mark')
      dom.innerHTML = `<img class="loading_img" src="" alt="">`
      el.appendChild(dom)
    },
    update(el,binding){
      if(binding.value.loading){
        el.getElementsByClassName('loading_div')[0].style.display = 'block'
      }else{
        el.getElementsByClassName('loading_div')[0].style.display = 'none'
      }
    },
    componentUpdated(e,binding){
      console.log('componentUpdated',e,binding)
    }
}
